// 1. 导入axios
import axios from 'axios'
// 导入store
// 可以通过store.state.xxx访问vuex中的全局数据
import store from '@/store/'
// 可以通过router.xx 等编程式导航的API
import router from '@/router/'
import { Loading } from 'element-ui'

// 2. 调用 axios.create() 创建实例对象
const request = axios.create({
  // 全局配置根路径
  baseURL: 'http://www.liulongbin.top:3008'
})

let instance = null
// 为request实例对象添加请求拦截器
// Add a request interceptor
request.interceptors.request.use((config) => {
  // 展示loading提示效果
  instance = Loading.service({
    background: 'rgba(0,0,0,0.8)',
    spinner: 'el-icon-loading',
    text: '数据加载中...'
  })
  // Do something before request is sent
  // 1. 判断用户请求的是否为“有权限的”接口
  // 1.2 如果不是有权限的接口，不需要添加
  // 1.3 如果是有权限的接口，则需要为config对象添加 Authorization 属性
  // 2. Authorization属性的值，必须是vuex中token的值
  // 3. 在utils/request.js中如何让获取到vuex中token的值？
  // console.log('触发了请求拦截器', config)
  if (config.url.startsWith('/my')) {
    // 请求的是有权限的接口，需要为 config.headers对象 添加 Authorization属性
    config.headers.Authorization = store.state.token
  }
  return config
}, (error) => {
  instance.close()
  // Do something with request error
  return Promise.reject(error)
})

// 为 request 实例对象，添加响应拦截器
request.interceptors.response.use((response) => {
  instance.close()
  return response
}, (error) => {
  instance.close()
  if (error.response.status === 401) {
    // token无效
    // 清空token
    store.commit('updateToken', '')
    // 强制跳转到登录页面
    router.push('/login')
  }
})

// 3. 向外导出axios的实例对象
export default request
